<template>
  <div>
    <span class="TopTitle">{{ state.topTitle }}</span>
    <div class="viewport">
      <!-- 进入后台 -->
      <div class="column">
        <!--概览-->
        <div class="overview">
          <div class="inner">
            <div class="title">
              <h4>当前设备状态</h4>
            </div>
            <div class="content">
              <!-- 运行 -->
              <div class="equipmentStatus on">
                <div class="leftIcon">
                  <img
                    style="width: 100%"
                    src="@/assets/boardImage/on.png"
                    alt="净化设备"
                  />
                </div>
                <div class="rightContent">
                  <div class="title">设备在线状态</div>
                  <div class="value">
                    <span class="text">{{ state.overView.on }}</span>
                  </div>
                </div>
              </div>
              <!-- 待机 -->
              <div class="equipmentStatus standby">
                <div class="leftIcon">
                  <img
                    style="width: 100%"
                    src="@/assets/boardImage/standby.png"
                    alt="净化设备"
                  />
                </div>
                <div class="rightContent">
                  <div class="title">设备待机状态</div>
                  <div class="value">
                    <span class="text">0</span>
                  </div>
                </div>
              </div>
              <!-- 故障 -->
              <div class="equipmentStatus fault">
                <div class="leftIcon">
                  <img
                    style="width: 100%"
                    src="@/assets/boardImage/fault.png"
                    alt="净化设备"
                  />
                </div>
                <div class="rightContent">
                  <div class="title">设备故障状态</div>
                  <div class="value">
                    <span class="text">{{ state.overView.fault }}</span>
                  </div>
                </div>
              </div>
              <!-- 换型 -->
              <div class="equipmentStatus replace">
                <div class="leftIcon">
                  <img
                    style="width: 100%"
                    src="@/assets/boardImage/replace.png"
                    alt="净化设备"
                  />
                </div>
                <div class="rightContent">
                  <div class="title">设备换型状态</div>
                  <div class="value">
                    <span class="text">0</span>
                  </div>
                </div>
              </div>
              <!-- 关机 -->
              <div class="equipmentStatus off">
                <div class="leftIcon">
                  <img
                    style="width: 100%"
                    src="@/assets/boardImage/off.png"
                    alt="净化设备"
                  />
                </div>
                <div class="rightContent">
                  <div class="title">设备离线状态</div>
                  <div class="value">
                    <span class="text">{{ state.overView.off }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 设备状态列表 -->
      <div class="column">
        <div class="deviceList">
          <el-scrollbar height="62vh">
            <div class="deviceListInner" v-loading="state.loading">
              <div
                v-for="(item, index) in state.list"
                class="item-container"
                :key="item.id"
              >
                <div class="left" @click="toggleInfo(item)">
                  <div class="leftImg">
                    <img src="@/assets/boardImage/device.png" alt="净化设备" />
                  </div>
                  <div class="title">{{ item.serialNo }}</div>
                  <div
                    class="status"
                    :style="{ '--border-color': whatColor(item.onlineState) }"
                  >
                    <div
                      class="dot"
                      :style="{ '--dot-color': whatColor(item.onlineState) }"
                    ></div>
                    <div
                      class="value"
                      :style="{ '--value-color': whatColor(item.onlineState) }"
                    >
                      {{ bigBoardA.tags.onlineState[item.onlineState] }}
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="leftContent">
                    <!-- 料品编码 -->
                    <div class="materialCode item">
                      <div class="title">料品编码</div>
                      <div class="value">{{ item.goodsNo }}</div>
                    </div>
                    <!-- 当前加工数量 -->
                    <div class="num item">
                      <div class="title">当前加工数量</div>
                      <div class="value">{{ item.currentProcessQuantity }}</div>
                    </div>
                    <!-- 加工进度 -->
                    <div class="progress item">
                      <div class="title">加工进度</div>
                      <div class="value">
                        <el-progress
                          :percentage="item.processRate - 0"
                          color="#33CCCC"
                        />
                      </div>
                    </div>
                    <!-- 工单号 -->
                    <div class="workOrdernum item">
                      <div class="title">工单号</div>
                      <div class="value">{{ item.workOrderNumber }}</div>
                    </div>
                  </div>
                  <div class="rightEcharts">
                    <div class="title">{{ item.createTime }}</div>
                    <!-- <div class="value" :ref="(el) => setRef(el, item)"></div> -->
                    <div
                      class="value"
                      ref="echartsRef"
                      :id="'myChart' + item.deviceId"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <!-- 页脚 -->
      <div class="pageFooter"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { useBigBoardA } from "@/store/backend/BigBoard/bigBoard1";
import { useConfig } from "@/store/config";
import { BEFORE_RESIZE_LAYOUT } from "@/store/constant/cacheKey"; //获取上一次切换的布局
import { useRouter, onBeforeRouteLeave } from "vue-router";
import {
  ref,
  onBeforeUnmount,
  reactive,
  onMounted,
  onDeactivated,
  onUnmounted,
} from "vue";
import "element-plus/theme-chalk/display.css";
import { Session } from "@/utils/storage";
import { timeFormat } from "@/utils/common";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useAdminInfo } from "@/store/adminInfo";
import { useDeviceRealTimeCapacity } from "@/store/backend/BigBoard/bigScreenFirst";
import { useDeviceRealTime } from "@/store/backend/Monitor/realTime";
// 引入echarts 按需引入
import * as echarts from "echarts/core";
import {
  DatasetComponent,
  DatasetComponentOption,
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  ToolboxComponent,
  ToolboxComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
  TransformComponent,
  VisualMapComponent,
  VisualMapComponentOption,
  GeoComponent,
  GeoComponentOption,
  DataZoomComponent,
  DataZoomComponentOption,
} from "echarts/components";
import {
  MapChart,
  MapSeriesOption,
  BarChart,
  BarSeriesOption,
  LineChart,
  LineSeriesOption,
  PieChart,
  PieSeriesOption,
  GaugeChart,
  GaugeSeriesOption,
} from "echarts/charts";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import screenfull from "screenfull";
echarts.use([
  DatasetComponent,
  LineChart,
  LegendComponent,
  BarChart,
  LabelLayout,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  TransformComponent,
  CanvasRenderer,
  UniversalTransition,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  ToolboxComponent,
  PieChart,
  GaugeChart,
  DataZoomComponent,
]);
type EChartsOption = echarts.ComposeOption<
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | BarSeriesOption
  | TitleComponentOption
  | LineSeriesOption
  | DatasetComponentOption
  | VisualMapComponentOption
  | GeoComponentOption
  | MapSeriesOption
  | ToolboxComponentOption
  | PieSeriesOption
  | GaugeSeriesOption
  | DataZoomComponentOption
>;

const config = useConfig();
const router = useRouter();
const bigBoardA = useBigBoardA();
const realTime = useDeviceRealTime();
const adminInfo = useAdminInfo();
const RealTimeCapacity = useDeviceRealTimeCapacity();
const { proxy } = useCurrentInstance();
let tableNode = ref();
let tableNodeTwo = ref();
let scrollHeight = ref<number>(0);
let currentScrollTop = ref<number>(0);
let maxScrollTop = ref<number>(0);
// let timeInter: any = ref(null); //每次滑动的定时器
// let timeInter2: any = ref(null);
// let timeInter3: any = ref(null);
let timeInter: any = 0; //每次滑动的定时器
let timeInter2: any = 0;
let timeInter3: any = 0;
let timeInterOneConfig = ref(false); //自动循环1标志
let timeInterTwoConfig = ref(false); //自动循环2标志

let monthAdd = ref(""); //本月设备新增数量
const nowTime: {
  complete: string;
  year: string;
  month: string;
  startTime: string;
  endTime: string;
} = reactive({
  complete: "",
  year: "",
  month: "",
  startTime: "",
  endTime: "",
});

const stableMonth = ref();
const regionId = ref();
const cascaderProps = {
  label: "name",
  value: "name",
  children: "children",
};
const cascaderOneProps = {
  label: "areaName",
  value: "areaId",
  children: "children",
};
const togglePage = ref(false);
const businesslength = ref();
//当前页面默认选项
const state3 = reactive({
  isFullScreen: false, //是否全屏
  fullscreen: 0,
});
//存放当月活性炭更换量图表
const state4: { charts: any[] } = { charts: [] };
const carbonSwitch = ref("VOCs");
const mapChartInit: { charts: any[] } = { charts: [] };
const state: {
  charts: any[];
  topTitle: any; //大标题
  list: any[];
  option: any;
  optionNull: any;
  loading: boolean;
  overView: any;
} = reactive({
  charts: [],
  topTitle: "",
  list: [],
  option: {
    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
    title: {
      text: "生产节拍",
      textStyle: {
        color: "#33CCCC", // 这里设置标题颜色
        fontSize: 14, // 设置标题字体大小为20
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
          textShadowOffsetX: 10, // 文字阴影水平偏移量
          textShadowOffsetY: 10, // 文字阴影竖直偏移量
        },
      },
    },
    legend: {
      show: false, // 设置图例不显示
      data: ["生产数据"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // xAxis: [
    //   {
    //     type: "category",
    //     boundaryGap: false,
    //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //   },
    // ],
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "100%"],
      splitLine: {
        show: false, // 这里设置x轴的分割线不显示
      },
    },
    // dataZoom: [
    //   {
    //     type: "inside",
    //     start: 0,
    //     end: 100,
    //   },
    //   {
    //     start: 0,
    //     end: 100,
    //     bottom: 0,
    //   },
    // ],
    series: [
      {
        name: "生产数据",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        // showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#33CCCC", // 0% 处的颜色
            },
            {
              offset: 0.6,
              color: "#33ccccad", // 90% 处的颜色
            },
            {
              offset: 1,
              color: "#33cccc26", // 100% 处的颜色
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [14, 23, 10, 26, 9, 34, 25],
      },
    ],
  },
  optionNull: {
    title: {
      text: "暂无数据",
      x: "center",
      y: "center",
      textStyle: {
        color: "#fff",
        fontWeight: "normal",
        fontSize: 16,
      },
    },
  },
  loading: true,
  overView: {
    on: 0,
    standby: 0,
    fault: 0,
    replace: 0,
    off: 0,
  },
});

const state2: { charts: any[] } = { charts: [] }; //存放echarts图表数据

const whatColor = (value: any) => {
  switch (value) {
    case 0:
      return "#b1b1b1";
    case 1:
      return "#90ffc9";
    case 2:
      return "#fff8ac";
    case 3:
      return "#ff5d87";
    case 4:
      return "#8cffff";
  }
};
//跳转机柜大屏详情
const toggleInfo = (item: any) => {
  togglePage.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
  realTime.infoSingle = item;
  router.push({
    path: "/admin/DataMHistoryTime/detail",
    query: { regCode: item.regCode, deviceId: item.deviceId },
  });
};

let stop = ref<boolean>(false);
interface anyObj {
  [key: string]: any;
}
const carbonItem: { config: anyObj } = reactive({ config: {} });

const mouseEnter = () => {
  window.clearInterval(timeInter);
  timeInter = 0;
  console.log("mouseLeave解除自动循环1", timeInter);
};
const autoCycle = () => {
  console.log("自动循环1");
  timeInter = window.setInterval(() => {
    tableNode.value = document.querySelector(".deviceListInner") as HTMLElement;
    // console.log("tableNode.value", tableNode.value.innerHeight);

    // 元素自增距离顶部1像素
    tableNode.value ? (tableNode.value.scrollTop += 1) : "";
    // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
    if (timeInter && tableNode.value) {
      if (
        tableNode.value?.scrollHeight -
          tableNode.value?.clientHeight -
          tableNode.value?.scrollTop <
        5
      ) {
        // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
        tableNode.value.scrollTop =
          tableNode.value?.scrollTop - tableNode.value?.scrollHeight / 2;
      }
    } else {
      window.clearInterval(timeInter);
      timeInter = 0;
    }
  }, 50);
};

//清除定时器
const clearAllInterval = () => {
  window.clearInterval(timeInter);
  window.clearTimeout(timeInter3);
  timeInter = 0;
  timeInter3 = 0;
};

//监听窗口大下自适应的方法
const echartsResize = () => {
  for (const key in state.charts) {
    state.charts[key].resize();
  }
};
//释放state中图表并删除
const dShift = () => {
  return new Promise((resolve, reject) => {
    for (const key in state.charts) {
      state.charts[key].dispose();
    }
    resolve("");
  });
};

//前往后台
proxy.eventBus.on("ToDashBoard", () => {
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  togglePage.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
  if (!timeInter) {
    // router.push({ path: "/admin/dashboard" });
    router.push({ path: "/admin/process" });
    // let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes as any);
    // if (firstRoute) routePush(firstRoute.path);
  }
});
//点击设备地图根据区域不同查看不同区域数据
const KeyDown = (event: any) => {
  if (event.keyCode === 122) {
    event.returnValue = false;
    screenfull.toggle();
    screenfull.onchange(() => {
      state3.isFullScreen = screenfull.isFullscreen;
      state3.fullscreen = 1;
    });
    // this.fullScreen(); //触发全屏的按钮
  }
};

//获取年月
const getTime = () => {
  //获取权限查询区域树将id遍历出来
  nowTime.startTime = timeFormat("", "yyyy-mm-dd") + " 00:00:00";
  nowTime.endTime = timeFormat("", "yyyy-mm-dd hh:MM:ss");
};

getTime();

proxy.eventBus.on("clear", () => {
  clearTimeout(timeInter3);
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  timeInter3 = 0;
  window.clearInterval(timeInter);
  timeInter = 0;
  console.log(timeInter, timeInterOneConfig.value, timeInterTwoConfig.value);
});

//批量初始化echarts
// const initBatch = (data: any[]) => {
//   const promises = data.map((item: any) => {
//     return getEchartsOptionData(item.recordList);
//   });
//   Promise.all(promises).then((res: any) => {
//     let len = res.length;
//     for (let i = 0; i < len; i++) {
//       setTimeout(() => {
//         let myChart = echarts.init(
//           document.getElementById("myChart" + data[i].deviceId)!
//         );
//         let option = _.cloneDeep(state.option);
//         option.xAxis[0].data = res[i][0];
//         option.series[0].data = res[i][1];
//         myChart.setOption(option);
//         state.charts.push(myChart);
//       }, 300);
//     }
//   });
// };
const initBatch = (data: any[]) => {
  let len = data.length;
  for (let i = 0; i < len; i++) {
    setTimeout(() => {
      let myChart = echarts.init(
        document.getElementById("myChart" + data[i].deviceId)!
      );
      if (JSON.stringify(data[i].recordList) !== "{}") {
        let option = _.cloneDeep(state.option);
        option.xAxis.data = data[i].recordList.time;
        option.series[0].data = data[i].recordList.capacity;
        myChart.setOption(option);
      } else {
        let option = _.cloneDeep(state.optionNull);
        myChart.setOption(option);
      }
      state.charts.push(myChart);
    }, 300);
  }
};

//大屏echarts数据遍历
const getEchartsOptionData = (data: any[]) => {
  return new Promise((resolve: any, reject: any) => {
    let len = data.length,
      xAxisData: any[] = [],
      seriesData: any[] = [];
    for (let i = 0; i < len; i++) {
      xAxisData.push(data[i].time);
      seriesData.push(data[i].capacity);
    }
    resolve([xAxisData, seriesData]);
  });
};
//大屏总览数据遍历
const getOverViewData = () => {
  let len = state.list.length;
  for (let i = 0; i < len; i++) {
    switch (state.list[i].onlineState) {
      case 1: //在线
        state.overView.on += 1;
        break;
      case 0: //离线
        state.overView.off += 1;
        break;
      case 2: //故障
        state.overView.fault += 1;
        break;
      case 3: //待机
        state.overView.standby += 1;
        break;
      case 4: //换型
        state.overView.replace += 1;
        break;
    }
  }
};

//获取大屏产能曲线数据
const getDeviceRealTimeCapacity = () => {
  RealTimeCapacity.getListScreen({
    time: nowTime.endTime,
  })
    .then((res: any) => {
      // state.list = res.rows;
      //初始化生产节拍
      initBatch(res.rows);
    })
    .catch((err: any) => {});
};
//获取设备实时数据接口
const getDeviceRealTimeData = () => {
  realTime
    .getListScreen({})
    .then((res: any) => {
      state.list = res.rows;
      state.loading = false;
      //大屏总览数据遍历
      getOverViewData();
    })
    .catch((err: any) => {
      state.loading = false;
    });
};

onMounted(() => {
  //获取设备实时数据
  getDeviceRealTimeData();
  //获取大屏产能曲线数据
  getDeviceRealTimeCapacity();
  window.addEventListener("resize", echartsResize);
  window.addEventListener("keydown", KeyDown);
  window.addEventListener("popstate", changeLayout); // 回退时执行changeLayout方法
});

onBeforeRouteLeave((to, from, next) => {
  console.log("onBeforeRouteLeave被触发", to, from, next);
  if (from.path.includes("BigScreen")) {
    timeInterOneConfig.value = true;
    timeInterTwoConfig.value = true;
    clearTimeout(timeInter3);
    timeInter3 = 0;
    window.clearInterval(timeInter);
    timeInter = 0;
    if (!timeInter) {
      next();
    }
  }
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount大屏1", timeInter, timeInter2);
  clearTimeout(timeInter3);
  timeInter3 = 0;
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
  togglePage.value ? changeLayout() : "";
  stop.value = true;
  //清空三个定时器
  clearAllInterval();
  //dispos后清空state中的charts数据
  dShift().then(() => {
    state.charts.length = 0;
  });
  if (state2.charts.length > 0) {
    state2.charts[0].dispose();
    state2.charts.shift();
  }
  if (mapChartInit.charts.length > 0) {
    mapChartInit.charts[0].dispose();
    mapChartInit.charts.shift();
  }
  window.removeEventListener("resize", echartsResize);
  window.removeEventListener("keydown", KeyDown);
});
onUnmounted(() => {
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  console.log("onUnmounted触发大屏1", timeInter.value);
  proxy.eventBus.off("ToDashBoard");
});
// 改变布局
const changeLayout = () => {
  let defaultBeforeResizeLayout = {
    layoutMode:
      config.layout.layoutMode === "Dashboard" ? "Default" : "Classic", //后台布局
    menuCollapse: config.layout.menuCollapse, //是否水平折叠收起菜单
  };
  let beforeResizeLayout = Session.get(BEFORE_RESIZE_LAYOUT); // 切换到上次布局方式
  console.log("beforeResizeLayout", beforeResizeLayout);

  if (!beforeResizeLayout)
    Session.set(BEFORE_RESIZE_LAYOUT, defaultBeforeResizeLayout);
  let beforeResizeLayoutTemp =
    (beforeResizeLayout?.layoutMode === "Dashboard"
      ? ""
      : beforeResizeLayout) || defaultBeforeResizeLayout;
  config.setLayout("menuCollapse", beforeResizeLayoutTemp.menuCollapse);
  config.setLayoutMode(beforeResizeLayoutTemp.layoutMode);
  window.removeEventListener("popstate", changeLayout);
};

onDeactivated(() => {
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
});
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}
@mixin searchCascader {
  .el-popper__arrow {
    display: none;
  }
  .el-input__wrapper {
    background: rgba(#101129, 0) !important; /* 透明 */
    .el-input__inner {
    }
  }
  background: rgba(#101129, 10) !important; /* 透明 */
  border: 1px solid #0a43bc !important;
  box-shadow: 0px 0px 4px 4px #0c2f5b inset !important;
  color: #fff;
  .el-cascader-node:hover {
    // 设置鼠标滑过时文字颜色
    background: #586f7c;
  }
  .el-cascader-node:focus {
    background: #586f7c;
  }
  .el-cascader-node__label {
    // 设置文字样式
    padding: 0 7px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
  }
  .el-cascader__suggestion-item {
    color: #fff;
  }
  .el-cascader__suggestion-item:hover {
    background: #586f7c !important; /* 透明 */
  }
  .el-cascader__suggestion-item:focus {
    background: #586f7c !important; /* 透明 */
  }
}

.viewport {
  position: relative;
  line-height: 1.15;
  font-size: 0.5rem;
  padding: 0;
  background-repeat: no-repeat;
  background-position: 0 0 / cover;
  width: 100vw;
  height: 100vh;
  /* 限定大小 */
  min-width: 1024px;
  max-width: 2078px;
  min-height: 780px;
  margin: 0 auto;
  background: url(../../../assets/boardImage/topTitleBg.png) no-repeat 0 0 /
    contain;
  display: flex;
  flex-direction: column;
  padding: 3.667rem 0.833rem 0;
}

.column {
  flex: 1.5;
  position: relative;
}

.column:nth-child(1) {
  flex: 0;
  margin: 1rem 0 0 0;
}

.panel {
  /* 边框 */
  box-sizing: border-box;
  border: 2px solid transparent;
  // border-image: url(../../../assets/boardImage/border.png) 51 38 21 132;
  border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
  position: relative;
  margin-bottom: 0.833rem;
}

.panel .inner {
  /* 装内容 */
  background-image: url(../../../assets/newBorder.png);
  background-size: 100% 100%;
  position: absolute;
  top: -2.125rem;
  right: -1.583rem;
  bottom: -0.875rem;
  left: -5.5rem;
  padding: 1rem 1.5rem;
}

.panel h3 {
  font-size: 0.833rem;
  color: #fff;
}

/* 概览区域 */
.overview {
  height: 10rem;
  background-image: url(../../../assets/boardImage/middleBg.png);
  background-size: contain;
  background-repeat: no-repeat;
  // background-position: center;
  .inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem 2.5rem;
    .title {
      h4 {
        font-size: 0.625rem;
        padding-left: 0.2rem;
        margin-bottom: 0.333rem;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        color: #33cccc;
        line-height: 28px;
        letter-spacing: 1px;
        text-shadow: 0px 6px 6px rgba(0, 0, 0, 0.3);
        text-align: justified;
        font-style: normal;
        text-transform: none;
      }
    }
    .content {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      width: 100%;
      .equipmentStatus {
        display: flex;
        flex: 1.5;
        .leftIcon {
          width: 62px;
          height: 72px;
          // border: 1px rgb(98, 121, 131) dashed;
        }
        .rightContent {
          margin-left: 30px;
          .title {
            font-family: MiSans, MiSans;
            font-weight: 400;
            font-size: 0.625rem;
            color: #b4c0cc;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            position: relative;
            padding-left: 5px;
          }
          .value {
            .text {
              font-family: MiSans, MiSans;
              font-size: 1rem;
              font-weight: bold;
              line-height: 42px;
              text-align: center;
              &::after {
                content: "台";
              }
            }
          }
        }
      }
      .on {
        .rightContent {
          .title {
            &::before {
              content: "";
              background: url(../../../assets/boardImage/arrowOn.png) no-repeat;
              background-size: 20px 20px;
              width: 20px;
              height: 20px;
              left: -20px;
              position: absolute;
              // border: 1px rgb(98, 121, 131) dashed;
            }
          }
          .value {
            .text {
              background: linear-gradient(to bottom, #ffffff, #90ffc9);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
            }
          }
        }
      }
      .standby {
        .rightContent {
          .title {
            &::before {
              content: "";
              background: url(../../../assets/boardImage/arrowStandby.png)
                no-repeat;
              background-size: 20px 20px;
              width: 20px;
              height: 20px;
              left: -20px;
              position: absolute;
              // border: 1px rgb(98, 121, 131) dashed;
            }
          }
          .value {
            .text {
              background: linear-gradient(to bottom, #ffffff, #fff8ac);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
            }
          }
        }
      }
      .fault {
        .rightContent {
          .title {
            &::before {
              content: "";
              background: url(../../../assets/boardImage/arrowFault.png)
                no-repeat;
              background-size: 20px 20px;
              width: 20px;
              height: 20px;
              left: -20px;
              position: absolute;
              // border: 1px rgb(98, 121, 131) dashed;
            }
          }
          .value {
            .text {
              background: linear-gradient(to bottom, #ffffff, #ffd9e3);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
            }
          }
        }
      }
      .replace {
        .rightContent {
          .title {
            &::before {
              content: "";
              background: url(../../../assets/boardImage/arrowReplace.png)
                no-repeat;
              background-size: 20px 20px;
              width: 20px;
              height: 20px;
              left: -20px;
              position: absolute;
              // border: 1px rgb(98, 121, 131) dashed;
            }
          }
          .value {
            .text {
              background: linear-gradient(to bottom, #ffffff, #8cffff);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
            }
          }
        }
      }
      .off {
        .rightContent {
          .title {
            &::before {
              content: "";
              background: url(../../../assets/boardImage/arrowOff.png) no-repeat;
              background-size: 20px 20px;
              width: 20px;
              height: 20px;
              left: -20px;
              position: absolute;
              // border: 1px rgb(98, 121, 131) dashed;
            }
          }
          .value {
            .text {
              background: linear-gradient(to bottom, #ffffff, #b1b1b1);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
            }
          }
        }
      }
    }
  }
}

/* 设备状态列表 */
.deviceList {
  width: 100%;
  .deviceListInner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    .item-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 48%;
      margin-bottom: 0.5rem;
      cursor: pointer;
      .left {
        padding: 0.2rem 0.25rem 0.25rem 0.25rem;
        border: 2px rgb(98, 121, 131) solid;
        text-align: center;
        .leftImg {
          margin-top: 10px;
          img {
            width: 70%;
            border: 1px rgb(98, 121, 131) dashed;
          }
        }
        .title {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: bold;
          font-size: 16px;
          color: #33cccc;
          line-height: 26px;
          letter-spacing: 2px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
        .status {
          width: 50px;
          padding: 3px;
          display: flex;
          justify-content: center;
          margin: 5px auto 0 auto;
          text-align: center;
          align-items: center;
          border-radius: 19px 19px 19px 19px;
          border: 1px solid var(--border-color);
          .dot {
            width: 8px;
            height: 8px;
            background: var(--dot-color);
            border-radius: 100px;
            color: var(--dot-color);
            bottom: 12rem;
            animation: notify-pulse 1s infinite;
            -webkit-animation: notify-pulse 1s infinite;
          }
          .value {
            margin-left: 3px;
            color: var(--value-color);
          }
        }
      }
      .right {
        width: 80%;
        padding-top: 10px;
        border-bottom: 1px rgb(98, 121, 131) solid;
        background-image: url(../../../assets/boardImage/listBg.png);
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        .leftContent {
          width: 30%;
          height: 100%;
          .item {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 25%;
            .title {
              color: #aaa8a8;
              position: relative;
              margin-left: 30px;
              line-height: 15px;
              &::before {
                content: "";
                background: url(../../../assets/boardImage/listPoint.png)
                  no-repeat;
                background-size: 15px 15px;
                width: 15px;
                height: 15px;
                left: -25px;
                position: absolute;
                border: 1px rgb(98, 121, 131) dashed;
              }
            }
            .value {
              text-align: center;
              color: #ffffff;
              font-weight: bold;
            }
          }
          .materialCode {
          }
          .num {
          }
          .progress {
            .value {
              width: 70%;
              margin: 0 auto;
              .el-progress-bar__outer {
                background-color: #363637;
              }
            }
          }
          .workOrdernum {
          }
        }
        .rightEcharts {
          width: 70%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;

          .title {
            position: absolute;
            right: 20px;
            text-align: right;
            color: #aaa8a8;
          }
          .value {
            width: 100%;
            height: 90%;
          }
        }
      }
    }
  }
}
/* 页脚 */
.pageFooter {
  width: 100%;
  height: 3vh;
  border-bottom: 1px rgb(98, 121, 131) solid;
  background-image: url(../../../assets/boardImage/bottomBg.png);
  background-size: contain;
  background-repeat: no-repeat;
}

//心跳效果
@keyframes notify-pulse {
  0% {
    transform: rotate(45deg) scale(0.8, 0.8);
    opacity: 1;
  }

  25% {
    transform: rotate(45deg) scale(1.2, 1.2);
    opacity: 0.5;
  }

  100% {
    transform: rotate(45deg) scale(0.8, 0.8);
    opacity: 1;
  }
}

.clock {
  position: absolute;
  top: -1.5rem;
  right: 1.667rem;
  font-size: 0.833rem;
  color: #0bace6;
}

.clock i {
  margin-right: 5px;
  font-size: 0.833rem;
}

@media screen and (max-width: 1600px) {
  .top span {
    transform: scale(0.9);
  }

  .top .province ul.sup li {
    padding: 0.4rem 0.5rem;
  }

  .top .province ul.sub li {
    padding: 0.23rem 0.5rem;
  }

  .quarter span {
    transform: scale(0.9);
  }
}

.pc-sel-table-cascader {
  @include searchCascader;
}
.pc-sel-area-cascader {
  @include searchCascader;
}

// .el-input__wrapper {
//   background: rgba(#101129, 0) !important; /* 透明 */
//   .el-input__inner {
//   }
// }
.el-cascader--small {
  .el-input--small {
    color: #fff;
    .el-input__wrapper {
      border: 2px solid #0a43bc !important;
    }
  }
  .el-input__wrapper {
    background: rgba(#101129, 0) !important; /* 透明 */
    .el-input__inner {
    }
  }
}
.pc-sel-carbon-cascader {
  width: 6%;
  height: 10%;
  overflow: hidden;
  .el-cascader-panel {
    height: 100%;
  }
  .el-cascader-menu {
    height: 100%;
    .el-cascader-menu__wrap {
      height: 100%;
    }
  }
  @include searchCascader;
}
.alarmTwo-table {
  .success {
    color: #00ff00;
  }
  .info {
    color: #c8c9cc;
  }
  .warn {
    color: #e6a23c;
  }
}

.TopTitle {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  font-size: 1.3rem;
  line-height: 3.5rem;
  z-index: 10;
  background: linear-gradient(to right, #0a43bc, #fff, #0a43bc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 1000;
}
</style>
